<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增专家管理')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
    <th:block th:include="include :: bootstrap-select-css"/>
    <th:block th:include="include :: select2-css"/>


</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-managementt-add">
        <h4 class="form-header h4">基本信息</h4>
        <div class="row">

            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">专家姓名：</label>
                    <div class="col-sm-8">
                        <input name="expertName" class="form-control" type="text" required>
                    </div>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">出生年月：</label>
                    <div class="col-sm-8">
                        <div class="input-group date">
                            <input name="birthday" class="form-control" placeholder="yyyy-MM-dd" type="text">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">

            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">曾任职务：</label>
                    <div class="col-sm-8">
                        <input name="positions" class="form-control" type="text">
                    </div>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">受聘年份：</label>
                    <div class="col-sm-8">
                        <div class="input-group date">
                            <input name="employmentTime" class="form-control " placeholder="yyyy-MM-dd" type="text"
                                   required>
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="row">

            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">审读范围：</label>
                    <div class="col-sm-8">

                        <!--                            <select name="reviewScope" class="form-control noselect2 selectpicker" data-none-selected-text="请选择开发语言" multiple>-->
                        <!--                                <option value="Java">Java</option>-->
                        <!--                                <option value="PHP">PHP</option>-->
                        <!--                                <option value=".NET">.NET</option>-->
                        <!--                            </select>-->
                        <!--                            <select class="form-control noselect2 selectpicker" data-none-selected-text="请选择开发语言" multiple>-->
                        <!--                                <option value="Java">Java</option>-->
                        <!--                                <option value="PHP">PHP</option>-->
                        <!--                                <option value=".NET">.NET</option>-->
                        <!--                            </select>-->
                        <select name="reviewScope" class="form-control noselect2 selectpicker"
                                th:with="type=${@dict.getType('re_review_scope')}" data-none-selected-text="请选择审读范围"
                                required multiple>
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                    th:value="${dict.dictValue}"></option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">递送地址：</label>
                    <div class="col-sm-8">
                        <input name="deliveryAddress" class="form-control" type="text" required>
                    </div>
                </div>
            </div>
        </div>


        <div class="row">

            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label ">邮政编码：</label>
                    <div class="col-sm-8">
                        <input name="postalCode" class="form-control" type="text">
                    </div>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">电子邮件：</label>
                    <div class="col-sm-8">
                        <div class="input-group">
                            <input name="email" class="form-control email" type="text" maxlength="50"
                                   placeholder="请输入邮箱">
                            <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="row">

            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label ">联系方式：</label>
                    <div class="col-sm-8">
                        <input name="by1" class="form-control" type="text">
                    </div>
                </div>
            </div>

        </div>


        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-sm-2 control-label">生活照片：</label>
                    <div class="col-sm-10">
                        <input type="hidden" name="photo">
                        <div class="file-loading">
                            <input class="form-control file-upload" multiple id="photo" name="file" type="file">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-sm-2 control-label"></label>
                    <div class="col-sm-10">
                        <button type="button" class="btn btn-w-m btn-warning" onclick="photograph('photo')">
                            <i class="fa fa-check"></i>拍照
                        </button>
                    </div>
                </div>
            </div>
        </div>


        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-sm-2 control-label">其他说明：</label>
                    <div class="col-sm-10">
                        <textarea name="explanation" maxlength="500" rows="3"
                                  class="form-control">[[*{explanation}]]</textarea>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-offset-5 col-sm-10">
                <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i
                        class="fa fa-check"></i>保 存
                </button>&nbsp;
                <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i
                        class="fa fa-reply-all"></i>关 闭
                </button>
            </div>
        </div>

    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<th:block th:include="include :: bootstrap-select-js"/>
<!--模板JS引入-->
<script th:src="@{/ajax/libs/template/template.js}"></script>
<!--拍照预览图片模板-->
<script type="text/html" id="template">
    <div class="file-preview-frame krajee-default  kv-preview-thumb file-preview-success"
         id={{id}} data-fileindex="0" data-fileid={{title}} data-template="image">
        <div class="kv-file-content">
            <img src={{src}} class="file-preview-image kv-preview-data" title={{title}}
                 style="width:213px;height:160px;" alt={{title}}>
        </div>
        <div class="file-thumbnail-footer">
            <div class="file-footer-caption" title={{title}}>
                <div class="file-caption-info">{{title}}</div>
                <div class="file-size-info"><samp>(108.21 KB)</samp></div>
            </div>
            <div class="file-thumb-progress kv-hidden" style="display: block;">
                <div class="progress">
                    <div class="progress-bar bg-success progress-bar-success" role="progressbar" aria-valuenow="100"
                         aria-valuemin="0" aria-valuemax="100" style="width:100%;">
                        完成
                    </div>
                </div>
            </div>
            <div class="file-upload-indicator" title="上传"><i class="glyphicon glyphicon-ok-sign text-success"></i></div>
            <div class="file-actions">
                <div class="file-footer-buttons">
                    <button type="button" class="kv-file-upload btn btn-sm btn-kv btn-default btn-outline-secondary"
                            title="上传文件" style="display: none;"><i class="glyphicon glyphicon-upload"></i></button>
                    <button type="button" class="kv-file-remove btn btn-sm btn-kv btn-default btn-outline-secondary"
                            title="删除文件"><i class="glyphicon glyphicon-trash"></i></button>
                    <button type="button" class="kv-file-down btn btn-sm btn-default" title="下载附件"><i
                            class="fa fa-cloud-download"></i></button>
                </div>
            </div>

            <div class="clearfix"></div>
        </div>
    </div>
</script>
<script th:inline="javascript">
    var prefix = ctx + "publish/managementt"
    $("#form-managementt-add").validate({
        focusCleanup: true
    });

    /*上传参数配置 name 属性值必须为file*/
    var fileConfig = {
        uploadUrl: '/common/upload',
        maxFileSize: 30000,
        browseClass: 'btn btn-primary',
        dropZoneTitle: "拖拽文件到这里",
    }
    /*循环加载页面上传组件*/
    $.each($(".file-upload"), function () {
        var nodeId = $(this).attr('id');
        $.common.uploadFileInput(fileConfig, $(this), "input[name='" + nodeId + "']");
    });

    /*高拍仪调用*/
    function photograph(parameter) {
        $.modal.open("拍照", ctx + "publish/identsample/indexOne?parameter=" + parameter, 1200);
    }
    /*高拍仪回调*/
    function photo(_base64, _parameter, arr) {
        console.log(arr);
        $.operate.post('/common/uploadBase64',
            {"base64": _base64},
            function (result) {
                if (result.code == web_status.SUCCESS) {
                    if ($("input[name='" + _parameter + "']").val() == null || $("input[name='" + _parameter + "']").val() == "") {
                        $("input[name='" + _parameter + "']").val(result.fileName);
                    } else {
                        $("input[name='" + _parameter + "']").val($("input[name='" + _parameter + "']").val() + ',' + result.fileName);
                    }
                    var id = new Date().getTime();
                    var title = result.fileName.substring(result.fileName.lastIndexOf("/") + 1);
                    var data = {
                        src: result.fileName,
                        arr: '0',
                        title: title,
                        id: id,
                    };

                    // 将数据放入模板中
                    var res = template("template", data);
                    $("input[name='" + _parameter + "']").next().find(".file-drop-zone-title").remove();
                    // 将模板放入页面中
                    $("input[name='" + _parameter + "']").next().find(".file-preview-thumbnails").append(res);
                    $("#" + _parameter).fileinput('_initFileActions');
                } else {
                    $.modal.alertError(result.msg);
                }
            }
        );

    }

    /*重新加载上传组件*/
    function reloadFileInput(_parameter) {
        var fileConfig = {
            uploadUrl: '/common/upload',
            maxFileSize: 30000,
            browseClass: 'btn btn-primary',
            dropZoneTitle: "拖拽文件到这里",
        }
        $.common.uploadFileInput(fileConfig, ("#" + _parameter), 'input[name="' + _parameter + '"]');
    }

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.saveTab(prefix + "/add", $('#form-managementt-add').serialize());
        }
    }

    $("input[name='birthday']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $("input[name='employmentTime']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

</script>
</body>
</html>